<div id="div2_chart"></div>
<script>

    var kategori = [];
    var series = [];
    var kat = [];
    var ser = [];
    var ser2 = [];
<?php

//var_dump($data);

function format_angka($angka) {
    $len = strlen($angka);
    $res = "";
    $c = 0;
    while ($len > 0) {
        $len--;
        $res = $angka[$len] . $res;
        $c = ($c + 1) % 3;
        if ($c == 0 && $len > 0)
            $res = "." . $res;
    }
    return $res;
}

$counter = 0;
foreach ($data as $pekerjaan) {
    $counter++;
    ?>

        kat.push("<?= $pekerjaan->kategori ?>");
        ser.push(<?= $pekerjaan->jumlah_laki ?>);
        ser2.push(<?= $pekerjaan->jumlah_perempuan ?>);
    <?php
}
?>
//    $('#div_chart').prepend('<div id="div2_chart"></div>');
    $('#div2_chart').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '<?= $judul ?>'
        },
        subtitle: {
            text: '<?php
if (isset($subtitle))
    echo implode('-', $subtitle);
else
    echo 'Banyuwangi';
?>'
        },
        xAxis: {
            categories: kat,
            labels: {
                rotation: -45,
                style: {
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Jumlah (orang)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.0f} orang</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
                name: 'Laki-Laki',
                data: ser,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#000000',
                    align: 'right',
                    x: 4,
                    y: -50,
                    style: {
                        fontFamily: 'Verdana, sans-serif',
                    }
                }
            },
            {
                name: 'Perempuan',
                data: ser2,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#000000',
                    align: 'right',
                    x: 4,
                    y: -50,
                    style: {
                        fontFamily: 'Verdana, sans-serif',
                    }
                }
            }]
    });

</script>
<div style="margin-top: 40px">
    <?php
    $session = $this->session->userdata('login');
    $logged_in = false;
    if ($session != null) {
        $logged_in = true;
    }
    $logged_in = $logged_in && isset($controller);
    ?>
    <table class="table table-striped">
        <tr>
            <th>No.</th>
            <th><?= $kolom ?></th>
            <th style="text-align: right">Jumlah Laki-Laki</th>
            <th style="text-align: right">Jumlah Perempuan</th>
            <th style="text-align: right">Jumlah</th>
            <?php
            if ($logged_in) {
                ?>
                <th style="text-align: right">Aksi</th>
                <?php
            }
            ?>
        </tr>
        <?php
        $no = 0;
        $tot1 = 0;
        $tot2 = 0;
        foreach ($data as $row) {
            $tot1+=$row->jumlah_laki;
            $tot2+=$row->jumlah_perempuan;
            $no++;
            ?>
            <tr>
                <td><?php
                    echo $no;
                    ?></td>
                <td><?php
                    echo $row->kategori;
                    ?></td>
                <td style="text-align: right"><?php
                    echo number_format($row->jumlah_laki,0,',','.');
                    ?></td>
                <td style="text-align: right"><?php
                    echo number_format($row->jumlah_perempuan,0,',','.');
                    ?></td>
                <td style="text-align: right"><?php
                    echo number_format($row->jumlah_perempuan+$row->jumlah_laki,0,',','.');
                    ?></td>
                <?php
                if ($logged_in) {
                    ?>
                    <td style="text-align: right"><a href="<?= site_url() . '/' . $controller ?>?<?php if(isset($id_kecamatan)&&$id_kecamatan>0){echo 'id_kecamatan='.$id_kecamatan.'&';} if(isset($id_kelurahan)&& $id_kelurahan>0){echo 'id_kelurahan='.$id_kelurahan.'&';} ?>key=<?= $row->kategori_id; ?>">Lihat</a></td>
                    <?php
                }
                ?>
            </tr>
            <?php
        }
        ?>
        <tr>
            <td>
            </td>
            <td>Total</td>
            <td style="text-align: right">
                <?= number_format($tot1,0,',','.'); ?>
            </td>
            <td style="text-align: right">
                <?= number_format($tot2,0,',','.');  ?>
            </td>
            <td style="text-align: right">
                <?= number_format($tot2+$tot1,0,',','.');  ?>
            </td>
            <?php
            if ($logged_in) {
                ?>
                <td></td>
                <?php
            }
            ?>
        </tr>
    </table>
</div>